<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图（无缝衔接）</title>
    <link rel="stylesheet" href="./css/banner.css">
</head>
<body>
    
    <div class="wraper">
        <!-- 轮播图 -->
        <div class="sipwer-banner">
                <!-- 图片容器 -->
                <div class="swiper-banner-box">
                    <ul>
                        <!-- 添加最后一张  -->
                        <li><a href="javascript:;"><i>5</i><img src="./images/5.jpg" alt=""></a></li>

                        <li><a href="javascript:;"><i>1</i><img src="./images/1.jpg" alt=""></a></li>
                        <li><a href="javascript:;"><i>2</i><img src="./images/2.jpg" alt=""></a></li>
                        <li><a href="javascript:;"><i>3</i><img src="./images/3.jpg" alt=""></a></li>
                        <li><a href="javascript:;"><i>4</i><img src="./images/4.jpg" alt=""></a></li>
                        <li><a href="javascript:;"><i>5</i><img src="./images/5.jpg" alt=""></a></li>

                        <!-- 添加第一张 -->
                        <li><a href="javascript:;"><i>1</i><img src="./images/1.jpg" alt=""></a></li>
                    </ul>
                </div>
                <!-- 导航点容器 -->
                <div class="swiper-banner-point">
                    <ol>
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ol>
                </div>

                <!-- 左右切换按钮 -->
                <div class="prev-box"><span class="icon"></span></div>
                <div class="next-box"><span class="icon"></span></div>
        </div>
    </div>


    <!-- 引入动画函数脚本文件 -->
    <script src="./js/animate.js"></script>
    <!-- 引入轮播图脚本文件 -->
    <script src="./js/banner.js"></script>
</body>
</html>